<div class="clear-transform">
  <ti-leftmenu
    [(active)]="active"
    [routable]="false"
    (collapsedChange)="toggleClick($event)"
    [(reloadState)]="reloadState"
    style="width: 200px"
  >
    <ng-container *ngFor="let group of items">
      <ti-leftmenu-group *ngIf="group.isGroup">
        <ti-leftmenu-group-item>
          <span>{{ group.label }}</span>
        </ti-leftmenu-group-item>
        <ti-leftmenu-level1 [item]="m1" *ngFor="let m1 of group.children">
          <ti-leftmenu-item>
            <div>{{ m1.label }}</div>
          </ti-leftmenu-item>
          <ti-leftmenu-level2 [item]="m2" *ngFor="let m2 of m1.children">
            <a>{{ m2.label }}</a>
          </ti-leftmenu-level2>
        </ti-leftmenu-level1>
      </ti-leftmenu-group>
      <ti-leftmenu-level1 *ngIf="!group.isGroup" [item]="group">
        <ti-leftmenu-item>
          <div>{{ group.label }}</div>
        </ti-leftmenu-item>
        <ti-leftmenu-level2 [item]="m2" *ngFor="let m2 of group.children">
          <a>{{ m2.label }}</a>
        </ti-leftmenu-level2>
      </ti-leftmenu-level1>
    </ng-container>
  </ti-leftmenu>
  <div *ngIf="reloadState" class="p-4" [ngStyle]="{marginLeft : marginLeft}">
    <div *ngIf="active === items[0].children[0].children[0]">子菜单 1.1 的内容</div>
    <div *ngIf="active === items[0].children[0].children[1]">子菜单 1.2 的内容</div>
    <div *ngIf="active === items[1].children[0]">
      <h3>菜单二的内容</h3>
    </div>
  </div>
</div>
